<template>
	<view class="content">
		<view class="top">
			<view class="logo">
				<image src="/static/Logo1.png" class="yp"></image>
			</view>
			<view class="project">
				<view class="projectname">
					项目名
				</view>
				<view class="Tel" @click="showPopup">
					联系电话
				</view>
			</view>

			<view>

			</view>
		</view>
		<view class="center">
			<view class="text1">
				当前阶段
			</view>
			<view class="jieduan">
				瓦工阶段
			</view>
		</view>
		<view class="botton">
			botton
		</view>
		<van-popup v-model:show="show" position="bottom" class="popupbotton">
			<view>
				联系电话
			</view>
			<view class="popup-list">
				<view>
					业主：
				</view>
				<view>
					1002101
				</view>
				
			</view>
		</van-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const show = ref(false);

	const showPopup = () => {
		show.value = !show.value;
	}
</script>

<style scoped>
	.content {
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		background-color: rgb(243, 243, 243);
	}

	.content {
		padding: 1px;
	}

	.content>view {
		margin: 10px;
		padding: 10px;
		background-color: white;
		border-radius: 10px;
	}

	.top {
		height: 10%;
		display: flex;
		justify-content: space-between;
	}

	.logo {
		display: flex;
		background-color: rgb(0, 211, 143);
		width: 93px;
		border-radius: 15px;
	}

	.project {
		width: 100%;
		margin-left: 10px;
	}

	.projectname {
		font-size: 18px;
		font-weight: 600;
	}

	.Tel {
		font-size: 13px;
		font-weight: 400;
		color: rgb(89, 89, 89);
		width: 100px;
		height: 20px;
		border: 1px solid rgb(89, 89, 89);
		border-radius: 5px;
		text-align: center;
		margin-top: 20px;
	}

	.yp {
		align-items: center;
		width: 100%;
		height: 100%;

	}

	.center {
		height: 5%;
		display: flex;
		align-items: center;
	}

	.text1 {
		width: 40px;
		font-weight: 1000;
		color: rgb(22, 139, 233);
	}

	.jieduan {
		margin-left: 10px;
		color: sandybrown;
	}

	.botton {
		height: 20%;
	}

	.popupbotton {
		height: 20%;
		border-radius: 20px 20px 0 0;
		padding: 20px;
		text-align: center;
	}
	.popup-list{
		margin-top: 20px;
		display: flex;
		justify-content: space-around;
	}
</style>